<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
  <meta charset="utf-8">
  <title>学生用户主页</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <link rel="icon" href="images/student.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="">主页</a></li>
    <li><a href="BookSearch.html">查询图书</a></li>
    <li><a href="RecommendBuy.html">荐购图书</a></li>
    <li><a href="BookRecommend.html">查看推荐</a></li>
    <li><a href="LookMessage.html">查看消息</a></li>
    <li><a href="PersonalMessage.html">个人信息</a></li>
    <li><a href="LostCard.html">挂失证件</a></li>
    <div class="dropdown">
      <a href="LentHistory.html" class="dropbtn">借阅历史</a>
    </div>
    <div class="user">
      <a href="" class="dropbtn">学生用户</a>
        <input type="text" size="10px" id="user" readonly="readonly">
        <div class="dropdown-content">
        <a href="Login.html">注销</a>
      </div>
    </div>
  </ul>

</body>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  .dropdown {
    display: inline-block;
  }

  .user {
    margin-right: 0.8cm;
    float: right;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }

  .dropdown-content a {
    color: black;
    /*下拉框的字体颜色*/
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: rgb(176, 221, 252)
      /*下拉框的选中项背景颜色*/
  }

  .user:hover .dropdown-content {
    display: block;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  li.quit {
    position: absolute;
    float: right;
    padding-right: 0%;
  }
</style>

<script>
window.onload = function () {
    document.getElementById("user").value=$.cookie('userName_s')+":"+$.cookie('lost');
    console.log($.cookie('userName_s'));
}
</script>
</html>